<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    
    <title>Map</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/maptalks/dist/maptalks.css">
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/maptalks/dist/maptalks.min.js"></script>
    <script type="text/javascript" src="js/draw.js"></script>
    <script type="text/javascript" src="data/lines.js"></script>
    <style>
        html, body {
            margin:0px;
            height:100%;
            width:100%
        }
        .container {
            width:100%;
            height:100%
        }
    </style>
  </head>
  <body>
    <div id="map" class="container"></div>
    <script>
        let map = new maptalks.Map('map', {
            center: [118.3, 36.09856],
            zoom: 11,
            spatialReference:{
                // projection : 'baidu'
            },
            baseLayer: new maptalks.TileLayer('base', {
                // urlTemplate: 'https://tile.thunderforest.com/cycle/{z}/{x}/{y}.png?apikey=7db779a175654648afb283bbda5e14c7',
                // subdomains: ['a','b','c'],
                urlTemplate: 'http://wprd{s}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&style=7&x={x}&y={y}&z={z}&scale=1&style=8',
                subdomains: ['01','02','03','04'],
                attribution:  '&copy; <a target="_blank" href="http://map.baidu.com">Baidu</a>'
            })
        });
        let layer = new maptalks.VectorLayer('vector').addTo(map);
        let lineLayer = new maptalks.VectorLayer('vectorLine').addTo(map);
        addPoints(layer);

        
        function createLine (coords) {
            let line = new maptalks.LineString(coords, {
                visible : true,
                arrowStyle : 'classic',
                arrowPlacement : 'vertex-last',
                symbol: {
                    'lineColor' : '#f00',
                    'lineWidth' : 3
                }
            });
        }

        let idx = 0;
        const maxDis = 604790;
        const maxRun = 60.0;
        let e = maxDis / maxRun;
        let bTime = (new Date()).getTime();
        // run();
        
        async function run() {
            while (1) {
                await sleep(10);
                loop(); 
                if (idx > 200000) break;
            }
        }
        
        
        function sleep (time) {
            return new Promise((resolve) => setTimeout(resolve, time));
        }
        function loop () {
            let tPass = ((new Date()).getTime() - bTime) / 1000.0;
            let t = LineData[idx][3] / e;
            
            if (tPass > t) {
                let p1 = Points[LineData[idx][1]];
                let p2 = Points[LineData[idx][2]];
                let dura = LineData[idx][4] / e;
                // console.log(idx, LineData[idx][5], p1, p2, dura);
                movePoint(p1, p2, dura * 20000, LineData[idx]);
                idx++;
            }
        }
        
        
        function movePoint (p1, p2, dura, item) {
            let img = IMGS[item[5]];
            // if (!img) { debugger }
            let symbol = {'symbol': {
                'markerFile': "img/" + img,
                'markerWidth'  : 25,
                'markerHeight' : 25
            }};
            let marker = new maptalks.Marker(p1, symbol).addTo(lineLayer);
            marker.on("click", () => {
                console.log(p1, p2, dura, item);
            });

            let d = [p2[0] - p1[0], p2[1] - p1[1]]; 
            marker.bringToFront().animate({
                translate: d
            }, { duration: dura }, (frame) => {
                if (frame.state.playState === 'finished') marker.remove();
            });
        }



    </script>
  </body>
</html>



